<template>
  <div style="min-height: 100%;" class="login-container">
    <div class="app-container" style="display: flex;justify-content: center; ">
      <el-card class="box-card" style="width: 50%">
        <div slot="header" class="clearfix">
          <span>账号管理系统-邮箱找回密码</span>
        </div>
        <el-form ref="form">
          <el-form-item prop="用户账号">
            <el-input
              ref="username"
              v-model="form.username"
              placeholder="用户账号"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            ><i slot="prefix" class="el-input__icon el-icon-user"/></el-input>
          </el-form-item>
          <el-form-item prop="邮箱地址">
            <el-input
              ref="email"
              v-model="form.email"
              placeholder="邮箱地址"
              name="email"
              type="text"
              tabindex="3"
              auto-complete="on"
            ><i slot="prefix" class="el-input__icon el-icon-s-promotion"/></el-input>
          </el-form-item>
          <el-form-item>
            <div style="text-align: right">
              <el-button
                :disabled="disabled"
                type="primary"
                @click="onSubmit"
              >{{ sendBtn }}
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script>
import {findPassword} from '@/api/user'

export default {
  data() {
    return {
      disabled: false,
      sendBtn: '找回密码',
      form: {
        username: '',
        email: ''
      }
    }
  },
  methods: {
    onSubmit() {
      findPassword(this.form).then(res => {
        this.$message.success(res.result)
      }).catch(err => {
        this.$message.warning(err.result)
      })
      let time = 120
      const timer = setInterval(() => {
        this.disabled = true
        this.sendBtn = time + '秒重新发送'
        time--
        if (time === 0) {
          this.disabled = false
          this.sendBtn = '找回密码'
          window.clearInterval(timer)
        }
      }, 1000)
    }
  }
}
</script>

<style scoped>
.login-container {
  width: 100%;
  background: url("https://w.wallhaven.cc/full/4o/wallhaven-4ogdo5.jpg") no-repeat 4px 5px;
  background-size: 100% 100%;
}
</style>

